<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <div class="margin-bottom">

          <el-select v-model="state" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option  :key="-1" label="请选择店铺类型" :value="-1"></el-option>
            <el-option v-for="(item, index) in navlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
          </el-select>
          <el-select v-model="code" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option  :key="-1" label="请选择商家类型" :value="-1"></el-option>
            <el-option  :key="0" label="线上商家" :value="0">
            </el-option> <el-option  :key="1" label="线下商家" :value="1"></el-option>
          </el-select>
          <el-select v-model="types" @change="getDataPage" placeholder="请选择类型" size="mini" class="mr10" style="width: 160px;">
            <el-option  :key="-1" label="请选择申请类型" :value="-1"></el-option>
            <el-option  :key="0" label="个人" :value="0"></el-option>
            <el-option  :key="1" label="企业" :value="1"></el-option>
          </el-select>
          <el-select v-model="province" @change="provincechange" placeholder="请选择省" size="mini" class="mr10" style="width: 160px;">
            <el-option v-for="(item, index) in provincelist" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
          <el-select v-model="city" @change="citychange" placeholder="请选择市" size="mini" class="mr10" style="width: 160px;">
            <el-option v-for="(item, index) in citylist" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
          <el-select v-model="area"  @change="getDataPage" placeholder="请选择区" size="mini" class="mr10" style="width: 160px;">
            <el-option v-for="(item, index) in arealist" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>

          <el-input v-model="keyword" placeholder="关键词" class="handle-input mr10" size="mini" style="width: 160px;"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="getDataPage" class="mr10" size="mini">搜索</el-button>
        </div>


      </div>

      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" border size="mini"
        @selection-change="handleSelectionChange" v-loading="loading" :height="$tableHight">
        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
        <el-table-column prop="user.nickname" label="申请用户"></el-table-column>
        <el-table-column prop="user.mobile" label="用户电话"></el-table-column>

        <el-table-column label="商家类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.code==0?'线上商家':'线下商家' }}
          </template>
        </el-table-column>
        <el-table-column label="申请类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.types==0?'个人':'个体工商户' }}
          </template>
        </el-table-column>
        <el-table-column prop="shop_class.name" label="店铺类型"></el-table-column>
        <el-table-column prop="name" label="店铺名称" show-overflow-tooltip></el-table-column>
        <el-table-column label="店铺地址" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.province+scope.row.city+ scope.row.area+scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="联系电话"></el-table-column>

        <!-- <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.goods[0].name }}
          </template>
        </el-table-column>
        <el-table-column prop="money" label="金额"></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column label="展示图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src=" scope.row.goods[0].img" :preview-src-list="[ scope.row.goods[0].img]"></el-image>
          </template>
        </el-table-column> -->


        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text"  @click="handleEdit(scope.row)" size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">

        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageIndex"
          :page-sizes="[20, 30, 40, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal" size="mini">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
//获取地址
import provinces from '@/assets/JSON/provinces.json'
import citys from '@/assets/JSON/cities.json'
import areas from '@/assets/JSON/areas.json'
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        pageIndex: 1,
         pageSize: 20
      },
      state: -1,
      states: 3,
      upload: '',
      editVisible: false,
      tableData: [],
      pageTotal: 0,
      imageUrl: '',
      videoUrl: '',
      type: 0,
      code:-1,
      types:-1,
      navlist: [],
      keyword: '',
      loading:false,
      provincelist:provinces,
      citylist:[],
      arealist:[],
      province:'',
      area:'',
      city:'',

    };
  },
  created() {
    this.getData()
    this.init()
    console.log(provinces)
  },
  methods: {
    getDataPage() {
      this.query.pageIndex = 1
      this.getData();
    },
    provincechange(e){
      let code=this.provincelist.filter(item=>{
        return item.name==e
      })[0].code
      this.citylist=citys.filter(item=>{
        return item.provinceCode==code
      })
      this.arealist=[]
      this.city=''
      this.area=''
    this.getData()
    },
    citychange(e){
      let code=this.citylist.filter(item=>{
        return item.name==e
      })[0].code
      this.arealist=areas.filter(item=>{
        return item.cityCode==code
      })
      this.area=''
      this.getData()
    },
    init(){
      this.request('admin/addShopClass/', 'get', { page: 1, size: 9999}).then(res => {
        // console.log(res)
        this.navlist = res.data.data
      })
    },
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getData();
    },
    //获取数据
    getData() {
      console.log(this.province)
      	this.loading=true
        this.request('admin/businessList/', 'get', {
          keyword:this.keyword,
          page: this.query.pageIndex,
          size: this.query.pageSize,
          shop_class_id:this.state,
          state:this.states,
          code:this.code,
          types:this.types,
          province:this.province,
          area:this.area,
          city:this.city
        }).then(res => {
        this.tableData = res.data.data
        this.pageTotal = res.data.total
      })
      	this.loading=false
    },
    // 发货
    handleEdit(e) {
      this.$router.push({ path: '/business/businessDetail', query: { data: JSON.stringify(e) } });
    },
    cancel() {
      this.getData();
    },

    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.request('admin/order/', 'delete', { ID: row.ID }).then(res => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.tableData.splice(index, 1)
              this.getData()
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion() {
      this.$router.push({ path: '/commodity/addgoods' })
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.margin-bottom{
  margin-bottom: 20px;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}

</style>
